import React from 'react'
import styles from "./component.less"

import { DeleteOutlined } from '@ant-design/icons'

export default (props: any) => {
    const { activeInx, inx, onDivClick, left, right, removeCom } = props
    return (
        <div
            className={styles.cardDiv}
            style={activeInx !== inx ? {} : { border: "2px solid #4685FD" }}
        >
            <div style={{ position: "absolute", left: "-24px", cursor: "pointer" }} onClick={() => {
                removeCom(inx)
            }}>
                <DeleteOutlined />
            </div>
            <div onClick={() => {
                onDivClick(inx)
            }}>
                {left}
            </div>
            {
                right !== null &&
                <div className={styles.cardContent} style={activeInx !== inx ? { display: "none" } : {}}>
                    {right}
                </div>
            }

        </div>
    )
}